<template>
    <Header>
        <div class="fenlei" @click="goSort">
            <img src="/src/assets/img/fenlei.png" alt="" />
        </div>
        <div class="search" @click="goSearch">
            <i class="iconfont icon-sousuo"></i>
            <span>学院风jk套装</span>
        </div>
        <div class="liaotian">
            <i class="iconfont icon-liaotian"></i>
        </div>
    </Header>
</template>
<script setup>
import { Header } from 'ant-design-vue/es/layout/layout';
import { useRouter } from 'vue-router';
let router=useRouter()
const goSearch=()=>{
    router.push('/search')
}
const goSort = ()=>{
		router.push('/sort')
	}
</script>
<style scoped>
header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 1.5rem;
    padding: 0.2rem 0.15rem;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
}
header img{
    width: 1.2rem;
    height: 1.2rem;
    line-height: 0.8rem;
    margin-top: 0.188rem;
}
header .search{
width: 16rem;
height: 1rem;
font-size: 0.5rem;
color: #ff4a02;
background-color: #eee;
border-radius: 0.123rem;

}
header .search i{
    margin: 0.2rem;
    width: 0.9375rem;
    height: 0.9375rem;
    line-height: 0.9375rem;
    color: #ff5500;
}
header .liaotian i {
    font-size: 1rem;
    color: #ff5500;
}
</style>